<template>
	<view class="container">
		<u-navbar back-text="返回" title="心之温" @click="toIndex"></u-navbar>
		<view class="location-card" @click="toIndex">
			<view class="location-title">
				当前位置
				<u-icon name="reload" color="#2979ff" size="45" style="float: right"></u-icon>
			</view>
			<view class="location">北京市朝阳区</view>
		</view>

		<view class="weather-card">
			<view class="temperature">26°C</view>
			<view class="FeelsLike">
				<view style="display: flex;">
					<i class="qi-100-fill" style="font-size: 30px;
					height: 30px;
					line-height: 30px;
					color: #fde047;
					width: 30%;text-align: right;"></i>
					<view style="margin-left: 5px;height: 30px;line-height: 30px;">体感温度 28°C
						<text style="color: #d0c1d2;">(较热)</text>
					</view>
				</view>

			</view>

		</view>


		<view style="width: 100%;height: 100%;">
			<MyButton type="tarea" :chartData="chartData" background="none" />
		</view>

		<view class="meta-data-card">
			<view style="color: #fff;font-size: 20px;">气象数据</view>
			<view class="card-container">
				<!-- 第一行 -->
				<view class="card-row">
					<view class="card-item">
						<view class="meta-label">
							<u-icon name="star-fill" color="#eab308" size="35"></u-icon>
							<text style="margin-left: 2px;">
								湿度
							</text>
						</view>
						<text class="meta-value">65%</text>
					</view>
					<view class="card-item">
						<view class="meta-label">
							<u-icon name="map" color="#facc15" size="35"></u-icon>
							<text style="margin-left: 2px;">
								风速
							</text>
						</view>
						<text class="meta-value">12km/h</text>
					</view>
				</view>

				<!-- 第二行 -->
				<view class="card-row">
					<view class="card-item">
						<view class="meta-label">
							<u-icon name="tags" color="#ef4444" size="35"></u-icon>
							<text style="margin-left: 2px;">
								气压
							</text>
						</view>
						<text class="meta-value">1000 hPa</text>
					</view>
					<view class="card-item">
						<view class="meta-label">
							<u-icon name="integral" color="#6366f1" size="35"></u-icon>
							<text style="margin-left: 2px;">
								风速
							</text>
						</view>
						<text class="meta-value">12km/h</text>
					</view>
				</view>
			</view>

		</view>

		<view class="health-advice-card">
			<view class="advice-title">健康建议</view>
			<view class="advice-text">
				🌞 紫外线较强，建议戴帽涂防晒霜，避免中午外出。💧注意补水，谨防中暑！
			</view>
		</view>
	</view>
</template>

<script>
	import MyButton from '@/components/temperatureChart.vue'

	export default {
		components: {
			MyButton
		},
		data() {
			return {
				chartData: {},
			}
		},
		mounted() {

		},
		onShow() {
			this.getServerData(); // 每次页面显示都刷新数据
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			toIndex() {
				uni.redirectTo({
				  url: '/pages/index/index'
				})
			},
			getServerData() {
				setTimeout(() => {
					this.chartData = {
						categories: [
							'08:00', '09:00', '10:00',
							'11:00', '12:00', '13:00',
							'14:00'
						],
						series: [{
							name: '趋势',
							data: [21, 25, 24, 26, 22, 24, 25],
							color: '#3c9cff',
							area: true // 开启区域渐变填充
						}]
					};
				}, 300);
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #5398e2;
	}

	.location-card {
		background-color: #65abe6;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.meta-data-card {
		background-color: #65abe6;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.location-title {
		font-size: 23px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #fff;
	}

	.location {
		font-size: 16px;
		color: #fff;
		opacity: 0.6;
	}

	.weather-card {
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
		text-align: center;
	}

	.temperature {
		font-size: 60px;
		font-weight: bold;
		color: #fff;
	}

	.FeelsLike {
		font-size: 18px;
		color: #fff;
	}

	.card-container {
		padding: 16rpx;
		margin-top: 10px;
	}

	.card-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		/* 行间距 */
	}

	.card-item {
		width: 45%;
		/* 留出2%的间隙 */
		background: #65abe6;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		/* 卡片动画效果（可选） */
		transition: all 0.3s ease;
		opacity: 0.8;
	}

	.card-item:active {
		transform: scale(0.98);
		/* 点击效果 */
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
	}

	.meta-label {
		display: block;
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 8rpx;
		text-align: center;
	}

	.meta-value {
		display: block;
		font-size: 35rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}

	.health-advice-card {
		background-color: #65abe6;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.advice-title {
		font-size: 23px;
		color: #fff;
	}

	.advice-text {
		background-color: #65abe6;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		margin-top: 10px;
		color: #fff;
		font-size: 18px;
		opacity: 0.8;
	}
</style>